import { computed, ref, watchEffect } from 'vue'
import type { MaybeRefOrGetter } from 'vue'

/**
 * 1综合能源消费量：吨标准煤
 * 2工业总产值：万元
 * 3用电量：千瓦时
 * 4用煤量：吨
 */
const units = ['', '吨标准煤', '万元', '千瓦时', '吨']
/**
 * 1综合能源消费量：[]
 * 2工业总产值：[]
 * 3用电量：[]
 * 4用煤量：[]
 */
const colors: [string, string][] = [
  ['rgba(19, 56, 144, 1)', 'rgba(109, 162, 239, 1)'],
  ['rgba(19, 56, 144, 1)', 'rgba(109, 162, 239, 1)'],
  ['rgba(35, 84, 173, 1)', 'rgba(109, 163, 240, 1)'],
  ['rgba(26, 117, 155, 1)', 'rgba(58, 255, 248, 1)'],
  ['rgba(60, 178, 84, 1)', 'rgba(167, 240, 175, 1)'],
]
const rand = () => +(Math.random() * 1000 + 1000).toFixed(2)

export default function loadList3(type: MaybeRefOrGetter<number>) {
  const lists3 = ref<number[]>([])
  const unit = computed(() => {
    return units[toValue(type)]
  })
  const color = computed<[string, string]>(() => {
    return colors[toValue(type)]
  })

  // TODO
  function loadList3(type: number): Promise<number[]> {
    return new Promise((resolve) => {
      // console.log(type)
      setTimeout(() => {
        resolve([...Array(12).fill(1).map(rand)])
      }, 200)
    })
  }

  watchEffect(async () => {
    lists3.value = await loadList3(toValue(type))
  })

  return {
    unit,
    color,
    lists3,
  }
}
